<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:o="http://openfaces.org/"
	xmlns:s="http://jboss.com/products/seam/taglib"
	template="/WEB-INF/esquema/permitTemplate.xhtml">


	<ui:define name="mainControls">
		<h:outputText value="Opciones" />
		<h:outputText value="     " />
		<h:panelGroup>
			<o:commandButton value="&lt;&lt; #{messages['BACK']}" onclick="goBack();"/>
			<o:commandButton value="#{messages['FINISH']}" onclick="proceed();"/>
		</h:panelGroup>
	</ui:define>

	<ui:define name="title">
		<div align="center">
			<br/>
			<strong>#{messages['building_permit.start_header']}</strong>
			<rich:separator lineType="solid"/>
			<br/>
		</div>
	</ui:define>
	
	<ui:define name="permitBody">
		<h:form>
			<style type="text/css">
				.introCol1 {
					vertical-align:top;
					width:30%;
				}
				.introCol2 {
					vertical-align:top;
					width:70%;
				}
			</style>
			
			<div align="center">
				<h:panelGrid width="80%" columns="2" columnClasses="introCol1,introCol2">
					<h:outputText value="#{messages['intro.cashierscode']}:"/>
					<h:panelGroup>
						<a4j:region renderRegionOnly="true">
							<h:inputText id="cashiersCode" value="#{buildingPermitHelper.permit.cashiersCode}"
							label="#{messages['intro.cashierscode']}"
							required="true"
							style="width:100%;">
								<a4j:support event="onblur" />
							</h:inputText>
							<br />
							<rich:message style="color:Red;" for="cashiersCode" />
						</a4j:region>
					</h:panelGroup>
					
					<h:outputText value="#{messages['intro.payment']}:"/>
					<h:panelGroup>
						<a4j:region renderRegionOnly="true">
							<h:inputText id="payment" value="#{buildingPermitHelper.permit.payment}"
							label="#{messages['intro.payment']}"
							required="true"
							style="width:100%;">
								<a4j:support event="onblur" />
							</h:inputText>
							<br />
							<rich:message style="color:Red;" for="payment" />
						</a4j:region>
					</h:panelGroup>
				</h:panelGrid>
				
				<br />
				<br />
			</div>

			<a4j:jsFunction
				name="goBack"
				ajaxSingle="true"
				action="#{buildingPermitHelper.goBack}">
			</a4j:jsFunction>
			<a4j:jsFunction
				name="proceed"
				action="#{buildingPermitHelper.beginProcess}">
			</a4j:jsFunction>
		</h:form>
	</ui:define>
</ui:composition>
